<!-- RichTextEditor.vue -->
<template>
  <div class="rich-text-editor">
    <EditorToolbar @add-block="handleAddBlock" @apply-style="handleApplyStyle" />
    <EditorComponent v-model="editorData" :config="editorConfig" @ready="handleEditorReady" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import EditorToolbar from './EditorToolbar.vue'
import EditorComponent from './EditorComponent.vue'

const editorData = ref(null)
const editorInstance = ref(null)

const editorConfig = {
  placeholder: '开始编辑内容...',
  autofocus: true,
  minHeight: 200
}

const handleEditorReady = instance => {
  editorInstance.value = instance
}

const handleAddBlock = type => {
  if (!editorInstance.value) return

  const blockData = {
    // 根据不同类型提供不同的初始数据
  }

  editorInstance.value.blocks.insert(type, blockData)
}

const handleApplyStyle = style => {
  if (!editorInstance.value) return

  // 这里需要根据EditorJS的API来实现样式应用
  // 可能需要通过selection或其他API
}
</script>

<style scoped lang="scss">
.rich-text-editor {
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;

  :deep(.ce-block) {
    padding-left: 30px;
    position: relative;

    // &__content {
    //   max-width: 100%;
    // }
  }

  :deep(.custom-icon) {
    position: absolute;
    left: -25px;
    top: 5px;
    font-size: 16px;
    color: #5b65f6;
  }
}
</style>
